<template>
  <el-dialog :title="type === 'coupon' ? '请选择优惠券' : '请选择红包'" :visible.sync="_visible" width="75%">
    <el-table :data="reward.list" stripe>
      <el-table-column label="标题">
        <template slot-scope="scope">
          <div>{{ scope.row.title }}</div>
          <div v-if="type === 'coupon'">
            <el-tag v-if="scope.row.cardType === 'CASH'" size="small">代金券</el-tag>
            <el-tag v-else-if="scope.row.cardType === 'DISCOUNT'" size="small">折扣券</el-tag>
            <el-tag v-else-if="scope.row.cardType === 'GIFT'" size="small">兑换券</el-tag>
            <el-tag v-else-if="scope.row.cardType === 'GROUPON'" size="small">团购券</el-tag>
            <el-tag v-else-if="scope.row.cardType === 'GENERAL_COUPON'" size="small">优惠券</el-tag>
            <el-tag v-else size="small">{{ scope.row.cardType }}</el-tag>
          </div>
          <div v-else-if="type === 'lucky'">
            <el-tag v-if="scope.row.luckyType === 'STATIC'">固定金额</el-tag>
            <el-tag v-else-if="scope.row.luckyType === 'RANDOM'">限定范围随机</el-tag>
            <el-tag v-else-if="scope.row.luckyType === 'ENUM'">限定种类随机</el-tag>
            <el-tag v-else>{{ scope.row.luckyType }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="有效期">
        <template slot-scope="scope">
          <template v-if="scope.row.dateInfo.type === 'DATE_TYPE_FIX_TIME_RANGE'">
            <div>开始时间: {{ $moment.unix(scope.row.dateInfo.beginTimestamp).format("YYYY-MM-DD") }}</div>
            <div>结束时间: {{ $moment.unix(scope.row.dateInfo.endTimestamp).format("YYYY-MM-DD") }}</div>
          </template>
          <template v-else-if="scope.row.dateInfo.type === 'DATE_TYPE_FIX_TERM'">
            <div>领取后 {{ scope.row.dateInfo.fixedBeginTerm === 0 ? '当' : scope.row.dateInfo.fixedBeginTerm }} 天生效</div>
            <div>有效期 {{ scope.row.dateInfo.fixedTerm }} 天</div>
            <div v-if="scope.row.dateInfo.endTimestamp">统一过期时间: {{ $moment.unix(scope.row.dateInfo.endTimestamp).format("YYYY-MM-DD") }}</div>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="库存">
        <template slot-scope="scope">
          <template v-if="scope.row.luckyType === 'RANDOM'">
            <div>总金额：{{ scope.row.reduceCostTotal / 100 | currency('', 2) }} 元</div>
            <div>还剩余：{{ scope.row.reduceCostStock / 100 | currency('', 2) }} 元</div>
          </template>
          <template v-else>
            <div>总库存: {{ scope.row.quantity }} 张</div>
            <div>还剩余: {{ scope.row.stock }} 张</div>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="选择数量, 1 ~ 10">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.number" :disabled="!numberCtrl || scope.row.stock < 1 || scope.row.reduceCostStock < 1" :min="1" :max="10" style="width: 120px;" size="small"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleCheck(scope.$index, scope.row)" :disabled="scope.row.stock < 1 || scope.row.number > scope.row.stock || scope.row.reduceCostStock < 1" type="primary" size="small" plain>选择</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页，start-->
    <el-pagination @current-change="handleCurrentChange" :current-page.sync="reward.pages" :page-sizes="[5]" :page-size="5" layout="total, sizes, prev, pager, next" :total="reward.total" background class="hui-mt-2"></el-pagination>
    <!--分页，end-->
  </el-dialog>
</template>

<script>
export default {
  name: 'hpro-dialog-reward',
  componentName: 'hpro-dialog-reward',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    visible: Boolean,
    numberCtrl: Boolean,
    value: Array,
    type: {
      type: String,
      default: 'coupon',
      validator (value) {
        return [
          'coupon',
          'lucky'
        ].indexOf(value) > -1
      }
    }
  },
  computed: {
    // 模态框打开关闭
    _visible: {
      get () {
        let visible = this.visible
        if (visible) {
          console.log(this.type)
          this.getReward()
        }
        return this.visible
      },
      set (val) {
        if (val) {
          this.$emit('open')
        } else {
          this.$emit('close')
        }
        this.$emit('update:visible', val)
      }
    },
    // 已经选中的优惠券或红包数据
    _value: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('change', val)
        this.$emit('update:value', val)
      }
    }
  },
  data () {
    return {
      reward: {
        total: 0,
        pages: 0,
        list: []
      }
    }
  },
  methods: {
    // 获取优惠券数据
    getCoupon () {
      let pages = this.reward.pages
      let total = 100
      let list = []
      let tmp = [
        {
          cardType: 'CASH',
          cardId: '123123123',
          title: '优惠券标题1',
          dateInfo: {
            type: 'DATE_TYPE_FIX_TIME_RANGE',
            beginTimestamp: 1486857600,
            endTimestamp: 1489334399
          },
          quantity: 1000,
          stock: 100
        },
        {
          cardType: 'CASH',
          cardId: '345345345',
          title: '优惠券标题2',
          dateInfo: {
            type: 'DATE_TYPE_FIX_TERM',
            fixedTerm: 30,
            fixedBeginTerm: 1,
            endTimestamp: 1489334399
          },
          quantity: 1000,
          stock: 8
        }
      ]
      tmp.map(element => {
        element.number = 1
        list.push(element)
      })
      this.reward.list = list
      this.reward.total = total
      this.reward.pages = pages + 1
    },

    // 获取红包数据
    getLucky () {
      let pages = this.reward.pages
      let total = 100
      let list = []
      let tmp = [
        {
          luckyType: 'STATIC',
          cardId: '123123123',
          title: '红包标题1',
          dateInfo: {
            type: 'DATE_TYPE_FIX_TIME_RANGE',
            beginTimestamp: 1486857600,
            endTimestamp: 1489334399
          },
          quantity: 1000,
          stock: 0
        },
        {
          luckyType: 'RANDOM',
          cardId: '345345345',
          title: '红包标题2',
          dateInfo: {
            type: 'DATE_TYPE_FIX_TERM',
            fixedTerm: 30,
            fixedBeginTerm: 1,
            endTimestamp: 1489334399
          },
          reduceCostTotal: 100000,
          reduceCostStock: 50000
        }
      ]
      tmp.map(element => {
        element.number = 1
        list.push(element)
      })
      this.reward.list = list
      this.reward.total = total
      this.reward.pages = pages + 1
    },

    // 根据传进来的type，获取对应的数据
    getReward () {
      this.reward.pages = 0
      let type = this.type
      // 根据不同的type，匹配数据
      switch (type) {
        case 'coupon':
          this.getCoupon()
          break
        case 'lucky':
          this.getLucky()
          break
        default:
          this.getCoupon()
          break
      }
    },

    // 分页事件
    handleCurrentChange () {
      console.log(this.reward.pages)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
      }, 500)
    },

    // 模态框打开关闭
    handleVidible () {
      let _visible = this._visible
      this._visible = !_visible
    },

    // 选择事件
    handleCheck (index, row) {
      let _value = this._value
      let cardId = row.cardId
      let title = row.title
      let number = row.number
      let tmp = {
        cardId: cardId,
        title: title,
        number: number
      }
      // 如果新选中的跟原有的cardId相同，删掉旧的数据，插入新数据
      _value.map(item => {
        if (item.cardId === tmp.cardId) {
          _value.splice(item.$index, 1)
        }
      })
      _value.push(tmp)
      this._value = _value
      this.handleVidible()
    }
  }
}
</script>
